<template>
  <div class="c-detail-cell-group">
    <CBoxTitle :title="props.title" :hasPadding="false" v-if="props.title" />
    <slot></slot>
    <el-divider class="detail-cell-group-divider" v-if="props.hasDivider"></el-divider>
  </div>
</template>

<script lang="ts" setup name="CDetailCellGroup">
import { defineProps, withDefaults } from 'vue';
import CBoxTitle from '@/components/CBoxTitle/index.vue';

interface CDetailCellGroupProps {
  title?: string;
  hasDivider?: boolean;
}
const props = withDefaults(defineProps<CDetailCellGroupProps>(), {
  title: '',
  hasDivider: true
});
</script>

<style lang="scss" scoped>
.c-detail-cell-group {
  padding: 0 24px;
  .detail-cell-group-divider {
    margin: 10px 0 9px;
    border-color: #f2f3f5;
  }
}
</style>
